  <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
  <script nomodule src="https://unpkg.com/@google/model-viewer@v0.7.1/dist/model-viewer-legacy.js"></script>  
  {%- liquid
      assign mark = 'h2'
    if section.settings.enable_adjust_h_tag
      assign mark = section.settings.adjust_h_tag_to
    endif

     case section.settings.text_alignment
    when 'left'
      assign text_alignment = 'text-md-start'
      assign content_alignment = 'mx-md-0'
    when 'center'
      assign text_alignment = 'text-md-center'
      assign content_alignment = 'mx-md-auto'
      when 'right'
      assign text_alignment = 'text-md-end'
      assign content_alignment = 'mx-md-0'
    else
  endcase

  case section.settings.mobile_text_alignment
    when 'left'
      assign text_alignment = text_alignment | append: ' text-start'
      assign content_alignment = content_alignment | append: ' mx-0'
    when 'center'
      assign text_alignment = text_alignment | append: ' text-center'
      assign content_alignment = content_alignment | append: ' mx-auto'
    when 'right'
      assign text_alignment = text_alignment | append: ' text-end'
      assign content_alignment = content_alignment | append: ' mx-0'
    else
  endcase

  assign section_identifier = '#shopify-section-' | append: section.id

  assign  padding_top = section.settings.padding_top | append:'px' 
   assign  padding_bottom = section.settings.padding_bottom | append:'px'

   assign padding_mobile_top = section.settings.padding_top_mob | append: 'px'
   assign padding_mobile_bottom = section.settings.padding_bottom_mob | append: 'px'
-%}

{%- style -%}
  {{ section_identifier }} .model-viewer-section {
  background-color: {{ section.settings.background_color }};
}

{{ section_identifier }} .model-viewer-container model-viewer {
      width: 100%;
    height: 550px;
    background-color: {{ section.settings.model_color }};
    --poster-color: transparent;
    border-radius: 8px;
}

{{ section_identifier }} {
    padding-top: {{padding_top}};
    padding-bottom: {{padding_bottom}};
  }

 @media only screen and (max-width: 430px) {
    {{ section_identifier }} {
      padding-top: {{ padding_mobile_top }};
      padding-bottom: {{ padding_mobile_bottom }};
    }
  }

.model-viewer-container {
    position: relative;
}

#ar-button {
    background-color: #007AFF;
    border-radius: 100px;
    border: none;
    color: #FFFFFF;
    padding: 12px 56px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: fit-content;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
#ar-button span.icon-ar-man {
    margin-right: 8px;
}
#ar-button:hover {
  background-color: #0052cc;
}
.model-viewer-subtext p {
    margin-bottom: 32px;
    font-size: 16px;
}
@media only screen and (max-width: 820px) {
#ar-button {
    padding: 8px 40px;
    width: max-content;
}
  .model-viewer-subtext p {
    font-size: 14px;
  }
  
  {{ section_identifier }} .model-viewer-container model-viewer {
    height: 400px;
  }
}

@keyframes elongate {
  from { transform: translateX(-50%) scale(0.8); }
  to { transform: translateX(-50%) scale(1.2); }
}
{%- endstyle -%}

<div class="model-viewer-section">
    {%- if section.settings.heading != blank or section.settings.section_description != blank -%}
        <div class="container">
            <div class="row">
                <div class="col {{ text_alignment }} {{ content_alignment }}">
                    <{{ mark }} class="model-viewer-heading section-title">{{ section.settings.heading }}</{{ mark }}>
                    <div class="model-viewer-subtext">{{ section.settings.section_description }}</div>
                </div>
            </div>
        </div>
    {%- endif -%}
  <div class="container">
    <div class="model-viewer-container">
      <model-viewer 
        src="{{ section.settings.model_url }}"
        ios-src="{{ section.settings.model_ios_url }}"
        camera-controls
        ar
        ar-modes="scene-viewer webxr quick-look"
        environment-image="neutral"
        shadow-intensity="1"
        exposure="1"
        auto-rotate
        rotation-per-second="30deg"
        min-camera-orbit="auto 60deg auto"
        max-camera-orbit="auto 120deg auto"
        camera-orbit="auto 90deg 105%">
      </model-viewer>
      {%- if section.settings.button_link != blank -%}
        <a href="{{ section.settings.button_link }}" id="ar-button" target="_blank">
            <span class="icon-ar-man">
            {{ section.settings.icon_image | image_url: width: 24 | image_tag: 
                loading: 'lazy', 
                class: 'ar-man-image',
                width: 24,
                height: 24
               }} 
             </span>
         {{ section.settings.button_text }}
        </a>
        {%- else -%}
        <div id="ar-button">
          <span class="icon-ar-man">
          {{ section.settings.icon_image | image_url: width: 24 | image_tag: 
              loading: 'lazy', 
              class: 'ar-man-image',
              width: 24,
              height: 24
             }} 
           </span>
       {{ section.settings.button_text }}
      </div>
      {%- endif -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Kiks 3D Model Viewer",
  "tag": "section",
    "class": "kiks-model-viewer-section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Take A Closer Look"
    },
    {
      "type": "richtext",
      "id": "section_description",
      "default": "<p>Max 2 is your portable workstation, gaming hub, and entertainment center—all in one feather-light frame. Stay productive and entertained wherever you go.</p>",
      "label": "Description"
    },
    {
      "type": "url",
      "id": "model_url",
      "label": "3D Model URL (.glb)",
      "info": "Upload your GLB file and paste the URL here"
    },
    {
      "type": "url",
      "id": "model_ios_url",
      "label": "iOS Model URL (.usdz)",
      "info": "Upload your USDZ file and paste the URL here"
    },
    {
      "type": "image_picker",
      "id": "icon_image",
      "label": "Icon Image",
      "info": "This image will be used as an icon for the AR button. Recommended size: 24x24px"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "AR Button Link"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "AR Button Text",
      "default": "Try On Virtually"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "Model Settings"
    },
    {
      "type": "color",
      "id": "model_color",
      "label": "3D Model Color",
      "default": "#FAFAFA"
    },
    {
      "type": "range",
      "id": "shadow_intensity",
      "min": 0,
      "max": 1,
      "step": 0.1,
      "label": "Shadow Intensity",
      "default": 1
    },
    {
      "type": "range",
      "id": "exposure",
      "min": 0,
      "max": 2,
      "step": 0.1,
      "label": "Exposure",
      "default": 1
    },
    {
      "type": "checkbox",
      "id": "auto_rotate",
      "label": "Enable Auto-rotate",
      "default": true
    },
    {
      "type": "header",
      "content": "Section Settings" 
    },
    {
    "type": "select",
    "id": "text_alignment",
    "label": "Desktop text alignment",
    "options": [
        {
        "value": "left",
        "label": "Left"
        },
        {
        "value": "center",
        "label": "Center"
        },
        {
        "value": "right",
        "label": "Right"
        }
    ],
    "default": "center"
    },
    {
    "type": "select",
    "id": "mobile_text_alignment",
    "label": "Mobile text alignment",
    "options": [
        {
        "value": "left",
        "label": "Left"
        },
        {
        "value": "center",
        "label": "Center"
        },
        {
        "value": "right",
        "label": "Right"
        }
    ],
    "default": "center"
    },
    {
        "type": "checkbox",
        "id": "enable_adjust_h_tag",
        "label": "Enable adjust H tag",
        "default": false
    },
    {
    "type": "select",
    "id": "adjust_h_tag_to",
    "label": "Adjust the H tag to",
    "options": [
        {
        "value": "h1",
        "label": "H1"
        },
        {
        "value": "h2",
        "label": "H2"
        },
        {
        "value": "h3",
        "label": "H3"
        },
        {
        "value": "h4",
        "label": "H4"
        },
        {
        "value": "h5",
        "label": "H5"
        },
        {
        "value": "h6",
        "label": "H6"
        }
    ],
    "default":   "h3"
    },
    {
        "type": "header",
        "content": "Kikstart Spacing Settings"
    },
    {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Padding top",
        "default": 64
    },
    {
        "type": "range",
        "id": "padding_bottom",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Padding Bottom",
        "default": 64
    },
    {
        "type": "range",
        "id": "padding_top_mob",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "For Mobile Padding top",
        "default": 48
    },
    {
        "type": "range",
        "id": "padding_bottom_mob",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "For Mobile Padding Bottom",
        "default": 48
    }
  ],
  "presets": [
    {
      "name": "Kiks 3D Model Viewer",
      "category": "Interactive"
    }
  ]
}
{% endschema %}